<template>
	<view class="page-container">
		<!-- 无车辆信息时的页面布局（图一） -->
		<view v-if="!hasVehicles" class="empty-page">
			<!-- 蓝色背景区域 -->
			<view class="header-bg"></view>
			
			<!-- 悬浮内容区域 -->
			<view class="content-container">
				<view class="empty-state">
					<image src="/static/images/xtx/暂无车辆信息.png" class="empty-image" mode="aspectFit" />
					<text class="empty-text">暂无车辆信息</text>
				</view>
			</view>
		</view>

		<!-- 有车辆信息时的页面布局（图二） -->
		<view v-else class="vehicle-page">
			<!-- 蓝色背景区域 -->
			<view class="header-bg"></view>
			
			<!-- 车辆列表区域 -->
			<view class="vehicle-list-container">
				<view v-for="(vehicle, index) in vehicleList" :key="index" class="vehicle-card"
					:class="{ 'default-vehicle': vehicle.isDefault }">
					
					<!-- 卡片上部分：车辆图片和信息 -->
					<view class="vehicle-card-top">
						<image :src="vehicle.image" class="vehicle-image" mode="aspectFill" />
						<view class="vehicle-info">
							<text class="vehicle-model">车型: {{ vehicle.model }}</text>
							<text class="vehicle-plate">车牌: {{ vehicle.plate }}</text>
						</view>
					</view>
					
					<!-- 分割线 -->
					<view class="vehicle-divider"></view>
					
					<!-- 卡片下部分：操作按钮 -->
					<view class="vehicle-actions">
						<view class="default-setting">
							<view class="radio-btn" :class="{ 'checked': vehicle.isDefault }"
								@click="setDefaultVehicle(index)"></view>
							<text class="default-text">设为默认车辆</text>
						</view>
						<text class="delete-btn" @click="deleteVehicle(index)">删除</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加车辆按钮 - 固定在底部（两个页面共用） -->
		<button class="add-vehicle-btn" @click="goToAddVehicle">
			<text class="btn-icon">+</text>
			<text class="btn-text">添加车辆</text>
		</button>
		
		<!-- 底部白色背景区域 -->
		<view class="bottom-bar-bg"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否有车辆信息
				hasVehicles: false,
				// 车辆列表
				vehicleList: [
					//示例数据，实际应该从接口获取
					{
						id: 1,
						model: '奔驰-C260L',
						plate: '豫M35468',
						image: '/static/images/xtx/奔驰c260l.png',
						isDefault: true
					},
					{
						id: 2,
						model: '奥迪-A6',
						plate: '豫M35422',
						image: '/static/images/xtx/奥迪A6.png',
						isDefault: false
					}
				]
			}
		},
		onLoad() {
			this.loadVehicleData();
		},
		methods: {
			// 加载车辆数据
			loadVehicleData() {
				// 这里应该调用接口获取车辆数据
				// 暂时使用模拟数据
				this.hasVehicles = this.vehicleList.length > 0;
			},

			// 跳转到添加车辆页面
			goToAddVehicle() {
				uni.navigateTo({
					url: '/pages/my/add/add'
				});
			},

			// 设置为默认车辆
			setDefaultVehicle(index) {
				// 先将所有车辆设为非默认
				this.vehicleList.forEach(vehicle => {
					vehicle.isDefault = false;
				});
				// 设置当前车辆为默认
				this.vehicleList[index].isDefault = true;
			},

			// 删除车辆
			deleteVehicle(index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这辆车吗？',
					success: (res) => {
						if (res.confirm) {
							this.vehicleList.splice(index, 1);
							this.hasVehicles = this.vehicleList.length > 0;
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.page-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 蓝色背景区域 */
	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background: linear-gradient(135deg, #3385fd 0%,#3385fd 100%);
		z-index: 1;
	}

	/* 空状态页面样式（图一） */
	.empty-page .content-container {
		position: absolute;
		top: 20rpx;
		left: 3%;
		width: 86%;
		background-color: #ffffff;
		border-radius: 20rpx;
		z-index: 2;
		padding: 40rpx 30rpx;
		min-height: 600rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		height: 100%;
	}

	.empty-image {
		width: 400rpx;
		height: 300rpx;
		margin-top: 50rpx;
		margin-right: 80rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999999;
		margin-top: -50rpx;
	}

	/* 有车辆信息页面样式（图二） */
	.vehicle-page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.vehicle-list-container {
		position: absolute;
		
		left: 1%;
		right: 1%;
		width: 93%;
		z-index: 2;
		padding: 25rpx 20rpx;
		padding-bottom: 100rpx;
	}

	/* 底部白色背景区域 */
	.bottom-bar-bg {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(env(safe-area-inset-bottom) + 140rpx);
		background-color: #ffffff;
		z-index: 98;
		pointer-events: none;
	}

	/* 添加车辆按钮 - 固定在底部 */
	.add-vehicle-btn {
		position: fixed;
		left: 7%;
		right: 7%;
		bottom: calc(env(safe-area-inset-bottom) + 24rpx);
		height: 80rpx;
		background: #3789FF;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		z-index: 99;
	}

	.btn-icon {
		font-size: 36rpx;
		color: #ffffff;
		margin-right: 16rpx;
		font-weight: bold;
	}

	.btn-text {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: 500;
	}

	/* 车辆列表样式 */

	.vehicle-card {
		height: 250rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		border: 1rpx solid #f0f0f0;
	}

	.vehicle-card.default-vehicle {
		background-color: #ffffff; /* 移除突出显示 */
	}

	/* 卡片上部分 */
	.vehicle-card-top {
		display: flex;
		align-items: center;
		margin-bottom: 50rpx;
		margin-top: 18rpx;
	}

	.vehicle-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
		background-color: #f5f5f5;
	}

	.vehicle-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.vehicle-model {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		margin-bottom: 12rpx;
	}

	.vehicle-plate {
		font-size: 28rpx;
		color: #666666;
	}

	/* 分割线 */
	.vehicle-divider {
		height: 3rpx;
		background-color: #ebebeb;
		margin: 50rpx 0;
	}

	/* 卡片下部分 */
	.vehicle-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: -30rpx;
	}

	.default-setting {
		display: flex;
		align-items: center;
	}

	.radio-btn {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #dddddd;
		border-radius: 50%;
		margin-right: 16rpx;
		position: relative;
		background-color: #ffffff;
	}

	.radio-btn.checked {
		border-color: #ff4444;
		background-color: #ff4444;
	}

	.radio-btn.checked::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 16rpx;
		height: 16rpx;
		background-color: #ffffff;
		border-radius: 50%;
	}

	.default-text {
		font-size: 28rpx;
		color: #333333;
	}

	.delete-btn {
		font-size: 28rpx;
		color: #999999;
		padding: 10rpx 20rpx;
	}
</style>